
function Drag(opts, event, hiddenVideos) {
    this.opts = {
        dragEle: '',
        targetEle: '',
        maxTop: 100,
        ondrop: function (obj) { }
    };

    for (var i in opts) {
        this.opts[i] = opts[i];
    }

    this.hiddenVideos = hiddenVideos;

    this.init(event);
    this.setEvent();
}

Drag.prototype = {
    $: function (o, p) {
        return (p || document).querySelector(o);
    }
};

Drag.prototype.init = function (e) {
    this.dragEle = typeof this.opts.dragEle == 'string' ? this.$(this.opts.dragEle) : this.opts.dragEle;//获得外层元素
    this.targetEle = typeof this.opts.targetEle == 'string' ? this.$(this.opts.targetEle) : this.opts.targetEle;//获得外层元素

    this.targetLeft = this.targetEle.offsetLeft;
    this.targetTop = this.targetEle.offsetTop;
    this.targetWidth = this.targetEle.offsetWidth || this.targetEle.clientWidth || this.targetEle.style.width;
    this.targetHeight = this.targetEle.offsetHeight || this.targetEle.clientHeight || this.targetEle.style.height;

    this.startY = e.touches[0].pageY;
    this.startX = e.touches[0].pageX;

    // console.log("init hiddenVideos", this.hiddenVideos)
    // console.log("init dragEle", this.dragEle.getBoundingClientRect())
    // console.log("init targetEle", this.targetEle.getBoundingClientRect())
    this.dragRects = this.dragEle.getBoundingClientRect()
    this.targetRects = this.targetEle.getBoundingClientRect()

    this.offsetY = 0;
    this.offsetX = 0;

    this.bLeft = this.dragEle.offsetLeft;
    this.bTop = this.dragEle.offsetTop;
    this.left = this.bLeft;
    this.top = this.bTop;

    this.width = this.dragEle.offsetWidth || this.dragEle.clientWidth || this.dragEle.style.width;
    this.height = this.dragEle.offsetHeight || this.dragEle.clientHeight || this.dragEle.style.height;
    this.dragEle.setAttribute('class', 'touchstartDrag')

    // this.dragEle.style.cssText += 'position:absolute;-webkit-transform: translate3d(0,0,0);-webkit-backface-visibility: hidden;';
    this.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);-webkit-backface-visibility: hidden;left:' + this.dragRects.left + 'px;top:' + this.dragRects.top + 'px';

    this.dragEle.setAttribute('pos', this.left + '-' + this.top);

};

Drag.prototype.setEvent = function () {
    var self = this;

    var startHandler = function (e) {
        e.preventDefault();
        e.stopPropagation();
        self.startY = e.touches[0].pageY;
        self.startX = e.touches[0].pageX;

        self.offsetY = 0;
        self.offsetX = 0;


        var pos = self.dragEle.getAttribute('pos'),
            left = parseInt(pos.split('-')[0]),
            top = parseInt(pos.split('-')[1]);

        self.left = left;
        self.top = top;


    };

    var moveHandler = function (e) {
        e.preventDefault();
        e.stopPropagation();
        self.offsetY = e.targetTouches[0].pageY - self.startY;
        self.offsetX = e.targetTouches[0].pageX - self.startX;

        var pos = self.dragEle.getAttribute('pos'),
            left = self.left + self.offsetX,
            top = self.top + self.offsetY;

        self.dragEle.style.cssText += '-webkit-transform: translate3d(' + self.offsetX + 'px,' + self.offsetY + 'px,0);';
        self.dragEle.setAttribute('pos', left + '-' + top);
    };

    var endHandler = function (e) {

        var pos = self.dragEle.getAttribute('pos'),
            left = self.left + self.offsetX,
            top = self.top + self.offsetY;

        self.dragEle.setAttribute('class', 'drag')

        self.dragEle.setAttribute('pos', left + '-' + top);
        // self.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);left: ' + left + 'px; ' + 'top: ' + top + 'px;right:auto;bottom:auto;';
        self.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);';
        //self.opts.ondrag.call(self, {left: left,top: top, offsetX: self.offsetX, type: 'end'});
        // self.dragEle.style.position = 'none'

        self.checkHit(e.changedTouches[0]);

        // console.log("end e", e.changedTouches[0])
        // console.log("end dragEle", self.dragEle.getBoundingClientRect())
        // console.log("end targetEle", self.targetEle.getBoundingClientRect())

        self.offsetX = self.offsetY = 0;
        self.left = left;
        self.top = top;
    };


    this.dragEle.addEventListener('touchstart', startHandler);
    this.dragEle.addEventListener('touchmove', moveHandler);
    this.dragEle.addEventListener('touchend', endHandler);
};

Drag.prototype.reset = function () {
    console.log("reset", this)
    var self = this;

    this.offsetX = this.offsetY = 0;
    this.left = this.bLeft;
    this.top = this.bTop;
    this.dragEle.setAttribute('pos', this.bLeft + '-' + this.bTop);
    // this.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);left: ' + this.bLeft + 'px; ' + 'top: ' + this.bTop + 'px;right:auto;bottom:auto;';
    //this.opts.ondrag.call(this, {left: this.left,top: this.top, offsetX: this.offsetX, type: 'start'});

};


Drag.prototype.checkHit = function (touch) {
    if (touch.clientX > this.targetRects.left && touch.clientX < this.targetRects.right
        && touch.clientY > this.targetRects.top && touch.clientY < this.targetRects.bottom) {
        let index;
        // 隐藏除混码区视频
        if (this.hiddenVideos) {
            // 拖到混码区
            index = 'Mix';
        } else {

            let rectMix = document.getElementById('videoItemMix').getBoundingClientRect();

            let rectIndex = document.getElementById('videoItem0').getBoundingClientRect();
            if (touch.clientY < rectIndex.bottom) { // 第一行
                if (touch.clientX < rectIndex.right) { // 索引为0
                    index = 0;
                } else if (touch.clientX < rectMix.right) {
                    index = 'Mix'; // 混码区
                } else {
                    index = 1;
                }
            } else {
                rectIndex = document.getElementById('videoItem2').getBoundingClientRect();
                if (touch.clientY < rectIndex.bottom) { // 第二行
                    if (touch.clientX < rectIndex.right) {
                        index = 2;
                    } else if (touch.clientX < rectMix.right) {
                        index = 'Mix'; // 混码区
                    } else {
                        index = 3;
                    }
                } else {
                    rectIndex = document.getElementById('videoItem4').getBoundingClientRect();
                    if (touch.clientY < rectIndex.bottom) { // 第三行
                        if (touch.clientX < rectIndex.right) {
                            index = 4;
                        } else if (touch.clientX < rectMix.right) {
                            index = 'Mix'; // 混码区
                        } else {
                            index = 5;
                        }
                    } else {
                        let flag = true; // 为true时继续查找第五行
                        for (let i of [6, 7, 8, 9, 10]) { // 第四行
                            rectIndex = document.getElementById(`videoItem${i}`).getBoundingClientRect();
                            if (flag && touch.clientY > rectIndex.bottom) {
                                break;
                            }
                            if (touch.clientX < rectIndex.right) {
                                index = i;
                                flag = false;
                                break;
                            }
                        }
                        if (flag) {
                            for (let i of [11, 12, 13, 14, 15]) { // 第五行
                                rectIndex = document.getElementById(`videoItem${i}`).getBoundingClientRect();
                                if (touch.clientX < rectIndex.right) {
                                    index = i;
                                    break;
                                }
                            }
                        }
                    }
                }
            }
        }
        console.log("ondrop checkHit index", index)
        this.opts.ondrop(touch, index)
    }
};

Drag.prototype.pos = function (obj) {
    this.offsetX = this.offsetY = 0;
    this.left = obj.l;
    this.top = obj.t;
    this.dragEle.setAttribute('pos', this.left + '-' + this.top);
    // this.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);left: ' + obj.l + 'px; ' + 'top: ' + obj.t + 'px;right:auto;bottom:auto;';
    // this.dragEle.style.cssText += '-webkit-transform: translate3d(0,0,0);';
};

// window.Drag = Drag;

export default Drag
